import React from 'react'
import Image from '../../components/Image'
import { NotBean } from '../../utils'
import './index.less'

export default class CategoryContent extends React.Component<any, any> {

    private node: any
    public componentWillReceiveProps () {
        document.getElementsByClassName('categoryContainer')[0].scrollTop = 0
    }
    public render(): JSX.Element {
        const { dataSource } = this.props
        return (
            <div className="categoryContainer" ref={(e: any) => {this.node = e }}>
                {dataSource.link_image && <div className="categoryContainer_item">
                    <div className="categoryContainer_recomTitle">为你推荐</div>
                    <Image controller={this.node} className="categoryContainer_recomImg" src={require('../../assets/detail_01.png')} />
                </div>}
                {
                    (dataSource && dataSource.sub && dataSource.sub.length === 0) 
                    ? NotBean
                    : ''
                }
                {
                    dataSource && dataSource.sub && dataSource.sub.map((item: any, index: number) => {
                        return (
                            <div className="categoryContainer_item" key={index}>
                                <div className="categoryContainer_categoryTitle">{item.name}</div>
                                <div className="categoryContainer_content">
                                    {
                                       item.sub && item.sub.map((itemList: any, i: number) => {
                                            return (
                                                <div key={`${index}-${i}-${Math.random()}`} className="categoryContainer_categoryItem">
                                                    <div style={{ display: 'inline-block' }} onClick={() => {this.goToUrl('/detail/search/' + itemList.id, i)}}>
                                                        <Image controller={this.node} className="categoryContainer_categoryImg" src={itemList.icon} />
                                                        <div className="categoryContainer_categoryText">{itemList.name}</div>
                                                    </div>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        )
                    })
                }
                {/* <div className="categoryContainer_item">
                    <div className="categoryContainer_categoryTitle">热门分类</div>
                    <div className="categoryContainer_content">
                        {
                            dataSource && dataSource.sub.map((item: any, index: number) => {
                                return (
                                    <div key={index} className="categoryContainer_categoryItem">
                                        <Link to={'/detail/search/' + item.id}>
                                            <div style={{ display: 'inline-block' }}>
                                                <Image className="categoryContainer_categoryImg" src={item.icon} />
                                                <div className="categoryContainer_categoryText">{item.name}</div>
                                            </div>
                                        </Link>

                                    </div>
                                )
                            })
                        }
                    </div>
                </div> */}
            </div>
        )
    }
    private goToUrl = (url: string = '/', index: any) => {
        const { setTabsIndex } = this.props
        setTabsIndex(index)
        window.sessionStorage.setItem('categoryTabsScrollTop', '0')
        this.props.goto(url)
    }
}